<template>
  <transition :name="`message-fade-${position}`">
    <div class="message" :class="type" :style="style" v-show="show">
      <div class="message__wrapper">
        <i class="mdi icon" :class="classType" style="color: white"></i>
        <span style="color: white" class="text">{{ message }}</span>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({})
export default class Message extends Vue {
  @Prop({ default: false }) private show!: boolean;
  @Prop({ default: "success" }) private type!:
    | "success"
    | "error"
    | "warning"
    | "info";
  @Prop({ default: "" }) private message!: string;
  @Prop() private flat!: boolean;
  @Prop() private position!: "left" | "center" | "right";
  @Prop() private width!: string | number;

  verticalOffset = 0;
  get style(): string {
    let left: string;
    let width: string;
    let shadow = "";
    if (typeof this.width === "number") {
      if (this.position === "left") {
        left = "left: 20px;";
      } else if (this.position === "right") {
        left = "right: 20px;";
      } else {
        const windowWidth = window.screen.width;
        left = `left: ${(windowWidth - this.width) / 2}px;`;
      }
      width = `width: ${this.width}px;`;
    } else {
      if (this.position === "left") {
        left = "left: 20px;";
      } else if (this.position === "right") {
        left = "right: 20px;";
      } else {
        const widthPercent = this.width.substring(
          0,
          this.width.trim().length - 1
        );
        left = `left: ${(100 - Number(widthPercent)) / 2}%;`;
      }
      width = `width: ${this.width};`;
    }
    if (!this.flat) {
      shadow =
        "box-shadow: 0 3px 3px -2px rgb(0 0 0 / 20%), 0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%) !important;";
    }
    return `top: ${this.verticalOffset}px;` + left + width + shadow;
  }

  get classType(): string {
    return this.type === "info"
      ? "mdi-information-outline"
      : this.type === "error"
      ? "mdi-close-circle-outline"
      : this.type === "warning"
      ? "mdi-alert-circle-outline"
      : "mdi-check-circle-outline";
  }
}
</script>

<style scoped lang="scss">
$info-background: rgba(33, 150, 243, 0.8);
$success-background: rgba(76, 175, 80, 0.8);
$error-background: rgba(255, 82, 82, 0.8);
$warning-background: rgba(251, 140, 0, 0.8);

.message-fade-left-enter-active,
.message-fade-left-leave-active,
.message-fade-center-enter-active,
.message-fade-center-leave-active,
.message-fade-right-enter-active,
.message-fade-right-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.message-fade-left-enter,
.message-fade-left-leave-to {
  transform: translateX(-50px);
  opacity: 0;
}
.message-fade-center-enter,
.message-fade-center-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
.message-fade-right-enter,
.message-fade-right-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

.message {
  position: fixed;
  display: block;
  z-index: 1000;
  padding: 16px;
  border-radius: 4px;
  background: $info-background;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  .message__wrapper {
    display: flex;
    align-items: center;
    border-radius: inherit;
    .icon {
      font-size: 24px;
      margin-right: 16px;
      align-self: flex-start;
    }
    .text {
      flex: 1 1 auto;
    }
  }
  &.info {
    background: $info-background;
  }
  &.success {
    background: $success-background;
  }
  &.error {
    background: $error-background;
  }
  &.warning {
    background: $warning-background;
  }
}
</style>
